<template>
  <div>
    <!-- main start -->
    <div class="navList">
      <div class="w">
        <div class="logo">
        </div>
        <ul>
          <li class="active"><router-link to="/baseServiceOrderSearch">会员订单查询</router-link></li>
          <li><router-link to="/baseServiceOrderAdd">新增会员购买记录</router-link></li>
          <li><router-link to="/baseServiceOrderStatistics">财务统计</router-link></li>
        </ul>
      </div>
    </div>

    <div class="contianer">
      <div class="orderInquiry">
        <div class="inquiryTerm">
          <div class="w">
            <h1 class="hposition">会员订单查询<span></span></h1>
            <div class="inquiryCon">
              <div>
                <span>方式一：</span>
                <label class="placeholder"><span :style="{display:buyerPhoneNumber1?'none':'inline'}" >手机号</span><input type="text" v-model="buyerPhoneNumber1" :class="element.buyerPhoneNumber1" maxlength="11"></label><label class="placeholder"><span :style="{display:cloudUserName1?'none':'inline'}" >姓名</span><input type="text" v-model="cloudUserName1" :class="element.cloudUserName"></label><input type="text" style="opacity:0;"><input type="button" @click.stop="methodOneSearch()" value="查询">
              </div>
              <div>
                <span>方式二：</span>
                <label class="placeholder"><span :style="{display:buyerPhoneNumber2?'none':'inline'}" >手机号</span><input type="text" v-model="buyerPhoneNumber2" :class="element.buyerPhoneNumber2" maxlength="11"></label><label class="placeholder"><span :style="{display:schoolName2?'none':'inline'}" >学校</span><input type="text" v-model="schoolName2" :class="element.schoolName"></label><label class="placeholder"><span :style="{display:className2?'none':'inline'}" >班级</span><input type="text" v-model="className2" :class="element.className"></label><input type="button" @click.stop="methodTwoSearch()" value="查询">
              </div>
            </div>
            <div class="inquiryList">
              <div>
                <span>分类：</span>
                <!-- <a href="javaScript:void(0);">全部</a> -->
                <ul>
                  <li :class="{active:payType==-1}" @click.stop="payType=-1;setSearch()">全部</li>
                  <li :class="{active:payType==1}" @click.stop="payType=1;setSearch()">手机端支付</li>
                  <li :class="{active:payType==4}" @click.stop="payType=4;setSearch()">电视端支付</li>
                  <li :class="{active:payType==3}" @click.stop="payType=3;setSearch()">电脑端支付</li>
                  <li :class="{active:payType==0}" @click.stop="payType=0;setSearch()" >广电营业厅支付</li>
                </ul>
              </div>
              <div>
                <span>状态：</span>
                <ul>
                  <li :class="{active:trade_status==-1}" @click.stop="trade_status=-1;setSearch()"  >全部</li>
                  <li :class="{active:trade_status==1}" @click.stop="trade_status=1;setSearch()" >成功</li>
                  <li :class="{active:trade_status==0}" @click.stop="trade_status=0;setSearch()"  >未支付</li>
                </ul>
                <p class="pageList"><a href="javaScript:void(0)" @click.stop="search($event,'-')" :class="page.pageLeft"></a><label><input type="text" v-model="searchPageSN" @keydown="search($event,'p');" @blur="search($event,'all')">/ {{baseServiceOrderCount}}页</label><a href="javaScript:void(0)" @click.stop="search($event,'+')" :class="page.pageRight"></a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="orderInquiryList">
          <div class="w">
            <table class="listCon">
              <thead>
                <tr>
                  <th>分类</th>
                  <th>手机号</th>
                  <th>姓名</th>
                  <th>创建时间</th>
                  <th>订单号</th>
                  <th>所属学校</th>
                  <th>所属班级</th>
                  <th>购买时长(月)</th>
                  <th>支付状态</th>
                  <th>支付金额(元)</th>
                  <th>服务开始日期</th>
                  <th>服务截止日期</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in baseServiceOrderArray">
                  <td>
                    <img v-if="item.payType==1" src="static/img/app.png" alt="">
                    <img v-else-if="item.payType==0" src="static/img/offLine.png" alt="">
                    <img v-else-if="item.payType==3" src="static/img/webIcon.png" alt="">
                    <img v-else src="static/img/onlineIcon.png" alt="">
                  </td>
                  <td><p>{{item.cloudUserPhoneNumber}}</p></td>
                  <td><p :title="item.cloudUserName">{{item.cloudUserName}}</p></td>
                  <td>
                    <p>{{item.updateTime}}</p>
                    <!-- <h1>15:56</h1> -->
                  </td>
                  <td><p>{{item.out_trade_no}}</p></td>
                  <td><p :title="item.schoolName">{{item.schoolName}}</p></td>
                  <td><p :title="item.className">{{item.className}}</p></td>
                  <td><p>{{item.serviceDuration}}</p></td>
                  <td><p>{{item.trade_status}}</p></td>
                  <td><p>{{item.total_fee}}</p></td>
                  <td><p>{{item.orderStartDay}}</p></td>
                  <td><p>{{item.orderEndDay}}</p></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->
  </div>
</template>

<script>
import axios from 'axios'
import config from '@/config'

export default {
  name: 'baseServiceOrderSearch',
  data () {
    return {
      // 查询条件
      buyerPhoneNumber1: '',
      cloudUserName1: '',
      buyerPhoneNumber2: '',
      schoolName2: '',
      className2: '',
      buyerPhoneNumber: '',
      cloudUserName: '',
      schoolName: '',
      className: '',
      trade_status: -1,
      pageSN: 0,
      pageSize: 10,
      payType: -1,

      // 
      baseServiceOrderArray:[],
      baseServiceOrderCount: 1,
      searchPageSN:1,
      element:{
        buyerPhoneNumber1:'',
        cloudUserName:'',
        buyerPhoneNumber2:'',
        schoolName:'',
        className:''
      },
      page:{
        pageLeft:'',
        pageRight:''
      }
    }
  },
  methods: {
    search: function (event,str) {
      if(event){
        this.element.buyerPhoneNumber1='';
        this.element.cloudUserName='';
        this.element.buyerPhoneNumber2='';
        this.element.schoolName='';
        this.element.className='';
        if(str=="-"){
          if(this.searchPageSN>1){
            this.searchPageSN--;
            this.pageSN=this.searchPageSN;
          }else{
            return false;
          }
        }
        if(str=="+"){
          if(this.searchPageSN<this.baseServiceOrderCount){
            this.searchPageSN++;
            this.pageSN=this.searchPageSN;
          }else{
            return false;
          }
        }
        if(str=="p"){
          if(event.keyCode==13){
            this.pageSN=this.searchPageSN;
          }else{
            return false;
          }
        }
        if(str='all'){
          this.pageSN=this.searchPageSN;
        }
      }else{
        this.searchPageSN=1;
        this.pageSN=1;
      }
      this.page.pageRight="";
      //console.log(event,this.pageSN,this.searchPageSN);
      // 参数
      // var data = new FormData()
      // data.append('request', 'baseServiceOrderSearch')
      // data.append('PHPSESSID', localStorage.PHPSESSID)
      // data.append('buyerPhoneNumber', this.buyerPhoneNumber)
      // data.append('cloudUserName', this.cloudUserName)
      // data.append('schoolName',this.schoolName);
      // data.append('className',this.className);
      // data.append('trade_status', this.trade_status)
      // data.append('pageSN', this.pageSN)
      // data.append('pageSize', this.pageSize)
      // data.append('payType', this.payType)
      var data = 'request='+'baseServiceOrderSearch'
        +'&buyerPhoneNumber='+this.buyerPhoneNumber
        +'&cloudUserName='+this.cloudUserName
        +'&schoolName='+this.schoolName
        +'&className='+this.className
        +'&trade_status='+this.trade_status
        +'&pageSN='+this.pageSN
        +'&pageSize='+this.pageSize
        +'&payType='+this.payType
        +'&PHPSESSID='+localStorage.PHPSESSID
      // 异步请求 
      let _this = this;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderSearch',data)
        .then(function (response) {
          // console.log(response);
          let data = response.data
          if (data.result==0) {
            _this.baseServiceOrderArray = data.data.baseServiceOrderArray;
            _this.baseServiceOrderCount = Math.ceil(data.data.baseServiceOrderCount/_this.pageSize);
            _this.baseServiceOrderCount=_this.baseServiceOrderCount?_this.baseServiceOrderCount:1;
            if(_this.baseServiceOrderCount>1 && _this.searchPageSN<_this.baseServiceOrderCount ){
              _this.page.pageRight="avail";
            }
          }
          if (data.result==2) {
            localStorage.clear()
            document.cookie = ''
            _this.$router.push({ path: 'login' })
          }
          // localStorage.username = username
          // localStorage.password = password
        })
        .catch(function (error) {
          console.log(error);
          // _this.$router.push('/login')
        });
    },
    methodOneSearch: function(){
      this.element.buyerPhoneNumber2='';
      this.element.schoolName='';
      this.element.className='';
      if(!this.buyerPhoneNumber1 && !this.cloudUserName1){
        this.tip("请填写手机号及姓名！");
        this.element.buyerPhoneNumber1="error";
        this.element.cloudUserName="error";
        return false;
      }else{
        this.element.buyerPhoneNumber1="";
        this.element.cloudUserName="";
      }
      var pnoneReg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if(!this.buyerPhoneNumber1){
        this.tip("手机号码不能为空");
        if(this.element.buyerPhoneNumber1!="error"){
          this.element.buyerPhoneNumber1="error";
        }
        return false;
      }else{
        this.element.buyerPhoneNumber1="";
      }
      if(!pnoneReg.test(this.buyerPhoneNumber1)){
        this.tip("请填写正确的手机号");
        if(this.element.buyerPhoneNumber1!="error"){
          this.element.buyerPhoneNumber1="error";
        }
        return false;
      }else{
        this.element.buyerPhoneNumber1="";
      }
      if(!this.cloudUserName1){
        this.tip("姓名不能为空");
        if(this.element.cloudUserName!="error"){
          this.element.cloudUserName="error";
        }
        return false;
      }else{
        this.element.cloudUserName="";
      }
      this.buyerPhoneNumber=this.buyerPhoneNumber1;
      this.cloudUserName=this.cloudUserName1;
      this.schoolName='';
      this.className='';
      this.search("","");
    },
    methodTwoSearch: function(){
      this.element.buyerPhoneNumber1='';
      this.element.cloudUserName='';
      if(!this.buyerPhoneNumber2 && !this.schoolName2 && !this.className2){
        this.tip("请填写手机号、学校及班级！");
        this.element.buyerPhoneNumber2="error";
        this.element.schoolName="error";
        this.element.className="error";
        return false;
      }else{
        this.element.buyerPhoneNumber2="";
        this.element.schoolName="";
        this.element.className="";
      }
      var pnoneReg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if(!this.buyerPhoneNumber2){
        this.tip("手机号码不能为空");
        if(this.element.buyerPhoneNumber2!="error"){
          this.element.buyerPhoneNumber2="error";
        }
        return false;
      }else{
        this.element.buyerPhoneNumber2="";
      }
      if(!pnoneReg.test(this.buyerPhoneNumber2)){
        this.tip("请填写正确的手机号");
        if(this.element.buyerPhoneNumber2!="error"){
          this.element.buyerPhoneNumber2="error";
        }
        return false;
      }else{
        this.element.buyerPhoneNumber2="";
      }
      if(!this.schoolName2){
        this.tip("学校不能为空");
        if(this.element.schoolName!="error"){
          this.element.schoolName="error";
        }
        return false;
      }else{
        this.element.schoolName="";
      }
      if(!this.className2){
        this.tip("班级不能为空");
        if(this.element.className!="error"){
          this.element.className="error";
        }
        return false;
      }else{
        this.element.className="";
      }
      this.buyerPhoneNumber=this.buyerPhoneNumber2;
      this.schoolName=this.schoolName2;
      this.className=this.className2;
      this.cloudUserName='';
      this.search("","");
    },
    tip:function(content){
      var tooltip=document.getElementsByClassName("tooltip");
      if (tooltip.length > 0) {
         return false;
      }
      var pElement = document.createElement("div");
      pElement.className="tooltip fadeIn";
      var messageNode = document.createTextNode(content);
      pElement.appendChild(messageNode);
      document.body.appendChild(pElement);
      setTimeout(function () {
          setTimeout(function () {
              document.body.removeChild(pElement);
          }, 300);
      }, 1000);
    },
    setSearch: function(){
      this.element.buyerPhoneNumber1='';
      this.element.cloudUserName='';
      this.element.buyerPhoneNumber2='';
      this.element.schoolName='';
      this.element.className='';
      this.search('','');
    },
  },
  watch:{
    searchPageSN:function(){
      if(this.searchPageSN<=1){
        this.page.pageLeft="";
      }else{
        this.page.pageLeft="avail";
      }
      if(this.searchPageSN>=this.baseServiceOrderCount){
        this.page.pageRight='';
      }else{
        this.page.pageRight="avail";
      }
    }
  },
  mounted:function(){
    this.$nextTick(function(){
      
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.orderInquiry  h1.hposition span{right:385px;}
</style>
